<template>
  <el-card class="box-card">
    <!-- 表单 -->
    <el-form :inline="true" v-model="formData" :rules="rules" ref="formdata">
      <el-form-item label="标题：" prop="tit">
        <el-input v-model="formData.tit" placeholder="请输入标题" style="width:200px" />
      </el-form-item>
      <el-form-item label="消息类型：" prop="xiaoxi">
        <el-select v-model="formData.xiaoxi" placeholder="请选择">
          <el-option label="文本类型" value="shanghai" />
          <el-option label="链接类型" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否全部发送：" prop="xiaoxi">
        <el-select v-model="formData.all" placeholder="请选择">
          <el-option label="发送全部" value="shanghai" />
          <el-option label="不发送全部" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button type="info">搜索</el-button>
      <el-button type="primary" @click="addnotic">新增通知</el-button>
      <el-button type="danger">批量删除</el-button>
      <el-button type="success" @click="exportdata">导出</el-button>
    </el-row>

    <!-- 表格 -->
    <el-table border class="table-item" :data="list">
      <!-- 复选框 -->
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <!--  -->
      <el-table-column
        label="通知标题"
        prop="title"
        align="center"
      />
      <el-table-column
        label="通知内容"
        align="center">
      <template v-slot="{row}">
        <div v-html="row.content">{{row.content}}</div>
            
         </template>
      
      </el-table-column>
      <el-table-column
        label="是否发送消息"
        align="center"
    >
      <template v-slot="{row}">
        <el-button type="warning" plain size="small" v-if="row.pushType===1?false:true">不发送全部</el-button> 
        <el-button type="primary" plain  size="small" v-if="row.pushType===0?false:true">发送全部</el-button> 
      </template>
      </el-table-column>
      <el-table-column
        label="消息类型"
        align="center"
      >
      <template v-slot="{row}">
        <el-button type="primary" plain size="small"  v-if="row.type===1?false:true">链接类型</el-button> 
        <el-button type="primary" plain size="small" v-if="row.type===0?false:true">文本类型</el-button> 
      </template>
      </el-table-column>
      <el-table-column
      prop="name"
        label="所属小区"
        align="center"
      />
      <el-table-column
        label="推送状态"
        align="center"
      >
      <template v-slot="{row}">
        <el-button type="primary" plain size="small"  v-if="row.pushType===0?false:true">已推送</el-button> 
        <el-button type="warning" plain size="small" v-if="row.pushType===1?false:true">未推送</el-button> 
      </template>
         </el-table-column>
      <el-table-column
        label="操作"
        width="300px"
        align="center"
      >
        <template v-slot="{row}">
        <el-button type="primary" size="small" v-if="row.pushType===1?false:true">推送</el-button>
        <el-button type="success" size="small"  @click="edit">修改</el-button>
        <el-button type="danger" size="small" @click="deldata(row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="el-page"
      :page-size="page.size"
      :current-page="page.page"
      :total="page.total"
      
      :page-sizes="[5,10,50,100,200]"
      
      layout="total, sizes, prev, pager, next, jumper"
   
     
      @current-change="handleCurrentChange"
    />

    <!-- 弹出框 -->
    <addnotice :showdialog="showdialog" @update="update" />
  </el-card>

</template>
<script>
// 获取表格的数据
import addnotice from './components/addnotic.vue'
import {getformdata,deleteformdata} from '@/api/qianqian'

export default {
  components: {
    addnotice
  },
  data() {
    return {
      // 存储输入框输入的值
      formData: {
        tit: '',
        xiaoxi: '',
        all: ''

      },
    
      // 表单验证
      rules: {
          title: [{ trigger: 'blur', message: '标题不能为空',  required: true,}]  },
      
      currentPage4: 4,
      list: [], // 获取表格的数据
      // 控制页码的
      page: {
        page: 1, // 当前页码
        size: 10,
        total: 0 // 总数
      },
      showdialog: false

    }
  },
   created(){
    // 获取表单详情
    this.getformdata()
   

  },
  methods: {
    // 删除数据
   async deldata(id){
    try{
      console.log(111);
       await this.$confirm('您确定删除该员工吗')
       await deleteformdata({ids: [id]})
         this.getformdata()
        this.$message.success('删除员工成功')
    }catch(err){
        console.log(err);
    } },
    
    // 获取表单的详情列表
       async getformdata(){
try{
     const data=  await  getformdata({
      page:'',
      size:10,
      title:'',
      type:'',
      pushType:''

     })
     this.list=data
    //  将数组的length赋值给总页面
     this.page.total=data.length
      console.log( data);

    }catch(err){
      console.log(err);
        
    }
    },

  
    handleCurrentChange(val) {
      // 把最新页码赋值
      this.page.page=val
      // 重新拉取数据
       this.getformdata()

    },
    
    // 新增按钮的点击事件
    addnotic() {
      this.showdialog = true
    },
    update(val){
      // 关闭弹层
      this.showdialog=val
    },
    // 修改按钮
    edit(){
      this.showdialog=true
      

    },
    exportdata(){
      const headers = {
        '通知标题': 'username',
        '通知内容': 'mobile',
        '是否发送消息': 'timeOfEntry',
        '消息类型': 'formOfEmployment',
        '所属小区': 'correctionTime',
        '推送状态': 'workNumber',
        '操作': 'departmentName'
      }
      import('@/vendor/Export2Excel').then(async excel => {
       const data=await  getformdata({page:'',
      size:10,
      title:'',
      type:'',
      pushType:''})

      const prams=this.formatJson(data,headers)

  excel.export_json_to_excel({
    header: Object.keys(headers), //表头 必填
    data:[prams], //具体数据 必填
    filename: '通知管理表单', //非必填
    autoWidth: true, //非必填
    bookType: 'xlsx' //非必填
  })
})
    },
    formatJson(data,headers){
       return data.map(item => {
        return Object.keys(headers).map(key => {
          if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') {
            return formatDate(item[headers[key]]) // 返回格式化之前的时间
          } else if (headers[key] === 'formOfEmployment') {
            var en = EmployeeEnum.hireType.find(obj => obj.id === item[headers[key]])
            return en ? en.value : '未知'
          }
          return item[headers[key]]
        }) // => ["张三", "13811"，"2018","1", "2018", "10002"]
      })

    }

  }
}

</script>
<style scoped >
.box-card{
 margin: 20px 20px;

}
.table-item{
   margin-top: 40px;

}
.el-page{
    float: right;
    margin: 20px 0;
  }

</style>
